<template>
  <s-layout title="报备" :bgStyle="{ color: '#fff' }">
    <uni-forms
      ref="formRef"
      :model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="180"
      labelAlign="center"
      border
      :labelStyle="{ fontWeight: 'bold' }"
    >
      <uni-forms-item name="project" label="业务名称">
        <uni-easyinput
          :inputBorder="false"
          placeholder="请输入业务名称"
          v-model="state.model.project"
        />
      </uni-forms-item>
      <uni-forms-item name="name" label="姓名">
        <uni-easyinput
          :inputBorder="false"
          placeholder="请输入姓名"
          maxlength="20"
          v-model="state.model.name"
        />
      </uni-forms-item>
      <uni-forms-item name="tel" label="电话">
        <uni-easyinput
          :inputBorder="false"
          placeholder="请输入电话"
          maxlength="11"
          v-model="state.model.tel"
        />
      </uni-forms-item>
      <uni-forms-item
        name="area"
        label="省-市-区县"
        @tap="openArea"
        class="form-item"
      >
        <uni-easyinput
          v-model="state.model.area"
          disabled
          :inputBorder="false"
          :styles="{ disableColor: '#fff', color: '#333' }"
          placeholderStyle="color: #BBB; font-size: 30rpx; font-weight: 400; line-height: normal"
          placeholder="请选择地址"
        >
          <template v-slot:right>
            <uni-icons type="right" />
          </template>
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
      <view class="footer-box ss-flex-col ss-row-between ss-p-20">
        <view class="ss-m-b-20">
          <button class="ss-reset-button save-btn ui-Shadow-Main" :disabled="loading" @tap="onSave">
            报备
          </button>
        </view>
      </view>
    </su-fixed>
    <!-- 省市区弹窗 -->
    <su-region-picker
      :show="state.showRegion"
      @cancel="state.showRegion = false"
      @confirm="onRegionConfirm"
    />
  </s-layout>
</template>

<script setup>
import sheep from "@/sheep";
import { ref, unref, reactive, watch } from "vue";

const formRef = ref(null);
const state = reactive({
  showRegion: false, // 省市区弹窗
  loading: false, // 提交中
  model: {
    project: "",
    name: "",
    tel: "",
    area: "",
  },
  rules: {
    project: {
      rules: [{ required: true, errorMessage: "请输入业务名称", trigger: "blur" }],
    },
    name: {
      rules: [{ required: true, errorMessage: "请输入姓名", trigger: "blur" }],
    },
    tel: {
      rules: [
        { required: true, errorMessage: "请输入电话", trigger: "blur" },
        {
          pattern: /^1[3456789]\d{9}$/,
          errorMessage: "请输入正确的电话号码",
          trigger: "blur",
        },
      ],
    },
    area: {
      rules: [{ required: true, errorMessage: "请选择地址", trigger: "blur" }],
    },
  },
});
watch(
  () => state.model.province_name,
  (newValue) => {
    if (newValue) {
      state.model.area = `${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
    }
  },
  {
    deep: true,
  }
);

// 选择省市区县
const onRegionConfirm = (e) => {
  state.model = {
    ...state.model,
    ...e,
  };
  state.showRegion = false;
};

// 加载省市区数据
const openArea = () => {
  sheep.$api.data.area().then((res) => {
    if (res.code === 1) {
      uni.setStorageSync('areaData', res.data);
      state.showRegion = true;
    }
  });
}

// 报备
const onSave = async () => {
  const validate = await unref(formRef)
    .validate()
    .catch((error) => {
      console.log("error: ", error);
    });
  if (!validate) return;
  if (state.loading) return;
  state.loading = true;
  let { project, name, tel, area } = state.model;
  let data = {project, name, tel, area};
  sheep.$api.news.reporting(data).then((res) => {
    if (res.code == 1) {
      sheep.$helper.toast("报备成功", 1500);
      setTimeout(() => {
        sheep.$router.back()
      }, 1500);
    } else {
      state.loading = false;
    }
  }).catch(() => {
    state.loading = false;
  });
};
</script>

<style lang="scss" scoped>
.footer-box {
  .save-btn {
    width: 710rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    color: $white;
  }

  .cancel-btn {
    width: 710rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: var(--ui-BG);
  }
}
</style>
